<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>

    <div id="app">
        <!-- 遍历数组 -->
        <ul>
            <li v-for="item in nameArr" :key="item.id">{{item.name}}--{{item.age}}</li>
        </ul>

        <!-- 遍历对象 -->
        <!-- item 为value key为属性名-->
        <p v-for="(item,key) in userinfo" :key="key">{{key}}--{{item}}</p>

        <!-- 遍历数字 -->
        <ul>
            <li v-for="(item,index) in num" :key="index">{{index}}--{{item}}</li>
            <!-- <p>{{item}}</p> -->
        </ul>
        <!-- 遍历字符串 -->
        <p>
            <span v-for="(item,index) in str">{{index}}--{{item}}</span>
        </p>

        <!-- v-for 遍历时需要指定key属性 -->

    </div>

</body>

</html>
<script>
    //  v-for : 内置指令, 用来遍历循环数据的
    // 语法: v-for='(item,index) in 要遍历的数据'
    // item 表示数据的每一项
    // index 表示每一项的索引(下标)

    // 注意: 遍历数据的时候, 最好要指令每一项的key属性.key属性必须具有唯一性
    // 优点: 在数据更新时,会创建虚拟dom, 初始化也会创建虚拟dom, 新旧虚拟dom 进行
    // 比较, 然后如果有key属性的时候, 相同的key进行比较, 这样可以提高比较效率,提高渲染速度


    const { createApp } = Vue;
    const app = createApp({
        data() {
            return {
                nameArr: [{
                    id: 1,
                    name: '吕布',
                    age: 38
                },
                {
                    id: 2,
                    name: '赵子龙',
                    age: 30
                },
                {
                    id: 3,
                    name: '典韦',
                    age: 47
                }],
                userinfo: {
                    username: '关羽',
                    age: 58
                },
                num: 10,
                str: 'abcdefg'
            }

        }
    }).mount('#app')


</script>